<link href="/res/js/ztree/css/zTreeStyle.css" rel="stylesheet">
<script src="/res/js/ztree/jquery.ztree.all.min.js"></script>
<script>
    var baseUrl = "<?php echo $baseUrl; ?>?t=1";
</script>

<div class="layui-row layui-col-space122">
    <div class="layui-col-md12" id="app-list">
        <div class="layui-card">
            <div class="layui-card-header">
                <div class="btns">
                    <?php if(Cm::$app->limitPost('/platform/sys/role','save')){ ?>
                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary layui-btn-xs" onclick="app.edit.load(0)">+ 新增角色</a>
                    <?php } ?>
                </div>
            </div>
            <div class="layui-card-body">
                <table data-url="<?php echo $baseUrl; ?>?action=list"
                       data-search="#search-box"
                       data-page=""
                       data-height="full-230"
                       id="data-list"
                       lay-filter='data-list' style="display: none;">
                    <thead>
                    <tr>
                        <th width="120" field="name">角色名</th>
                        <th width="80" align="center" templet="#tpl-status">状态</th>
                        <th width="80" align="center" field="sort">排序</th>
                        <th width="230" field="remark">备注</th>
                        <th width="180" align="center" field="addtime">创建时间</th>
                        <th minWidth="200" toolbar="#tpl-cmd">操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tpl-status">
    {{# if(d.status==1){ }}
    <span style="color: green;">正常</span>
    {{# }else{ }}
    <span style="color: red;">停用</span>
    {{# } }}
</script>

<script type="text/html" id="tpl-cmd">
    <?php if(Cm::$app->limitPost('/platform/sys/role','info')){ ?>
        <button onclick="app.edit.load({{d.id}})" class="layui-btn layui-btn-xs">编辑</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/sys/role','get_permission')){ ?>
        <button onclick="app.tree.init({{d.id}})" class="layui-btn layui-btn-xs layui-btn-normal">设置权限</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/sys/role','del')){ ?>
        <button onclick="app.del({{d.id}},{{d.is_superman}})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
    <?php } ?>    
</script>


<script id="tpl-edit" type="text/html">
    <div class="layui-card">
        <div class="layui-card-header">{{info.id == 0 ? '新增' : '编辑'}}角色</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">

                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" value="{{info.name}}" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sort" placeholder="" lay-verify="sort" value="{{info.sort}}" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">启用状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-filter='status' name="status" lay-skin="switch" lay-text="启用|停用" {{info.status==1?'checked':''}}>
                    </div>
                </div>

                <div class="layui-form-item" style="display: none;">
                    <label class="layui-form-label">是否超管</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-filter='is_superman' name="is_superman" lay-skin="switch" lay-text="是|否" {{info.is_superman==1?'checked':''}}>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="" name="remark" class="layui-textarea">{{info.remark}}</textarea>
                    </div>
                </div>
                <?php if(Cm::$app->limitPost('/platform/sys/role','save')){ ?>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="tpl-tree">
    <div class="layui-card">
        <div class="layui-card-header">变更权限</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <input type="hidden" name="id" value="{{id}}" class="layui-input">
                <div class="layui-form-item">
                    <label class="layui-form-label">功能权限</label>
                    <div class="layui-input-block">
                        <div style="background-color: #f9f9f9;padding: 5px 0;">
                            <ul id="tree-permissions" class="ztree"></ul>
                        </div>
                    </div>
                </div>
                <?php if(Cm::$app->limitPost('/platform/sys/role','save_permission')){ ?>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="tree">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script>
    var app = {
        init: function () {
            $('#data-list').table();
            this.form.init();
        },
        edit: {
            pdata: {},
            load: function (id) {
                $.post(baseUrl + "&action=info", {id: id}, function (d) {
                    layer.open({
                        title:false,
                        area:['430px','400px'],
                        type:1,
                        content:template('tpl-edit', d.data)
                    });
                    app.form.init();
                    app.form.render();
                    app.edit.pdata = d.data.info;
                }, "json");
            },
        },
        form: {
            obj: null,
            init: function () {
                var _this = this;
                layui.use('form', function () {
                    var form = layui.form;
                    form.verify({
                        title: [
                            /^[\S]{1,}$/
                            , '请输入角色名称！'
                        ],
                        sort: [
                            /^(\d|[1-9]\d+)$/,
                            '请输入正确的排序值！'
                        ]
                    });
                    _this.obj = form;
                });
            },
            on: function () {
                var _this = this;

                this.obj.on('switch(status)', function (data) {
                    app.edit.pdata.status = data.elem.checked ? 1 : 0;
                });
                this.obj.on('switch(is_superman)', function (data) {
                    app.edit.pdata.is_superman = data.elem.checked ? 1 : 0;
                });

                this.obj.on('submit(*)', function (data) {

                    app.edit.pdata.name = data.field.title;
                    app.edit.pdata.sort = data.field.sort;
                    app.edit.pdata.remark = data.field.remark;

                    app.save();
                    return false;
                });

                this.obj.on('submit(tree)', function (data) {

                    app.tree.pdata.permissions_ids = app.tree.permissions.data();
                    app.tree.pdata.id = data.field.id;
                    
                    app.tree.save();
                    return false;
                });
            },
            render: function (select) {
                this.obj.render(select);
                this.on();
            }
        },
        tree: {
            pdata:{
                permissions_ids:'',
                id: 0
            },
            init: function (id) {
                $.post(baseUrl + "&action=get_permission", {id: id}, function (d) {
                    layer.open({
                        title:false,
                        area:['430px','400px'],
                        type:1,
                        content:template('tpl-tree', {id:id})
                    });
                    app.form.init();
                    app.form.render();
                    app.tree.permissions.init(d.data.permissions);
                }, "json"); 
            },
            load: function (obj, data) {
                var setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view: {
                        showIcon: false
                    },
                    callback: {
                        beforeClick: function () {
                            return false;
                        }
                    }
                };
                return $.fn.zTree.init($(obj), setting, data);
            },
            permissions: {
                obj: null,
                init: function (data) {
                    this.obj = app.tree.load('#tree-permissions', data);
                },
                data: function () {
                    var data = this.obj.getCheckedNodes(true);
                    var ids = '0';
                    $(data).each(function (i, item) {
                        if (item.level == 3)
                            ids += "," + item.id;
                    });
                    return ids;
                }
            },
            save:function(){
                $.post(baseUrl+'&action=save_permission',app.tree.pdata,function (d) {
                    if(d.flag)
                    {
                        layer.closeAll();
                        layer.msg(d.msg);
                        $('#data-list').table();
                    }else{
                        layer.msg(d.msg);
                    }
                },'json')
            }
        },
        save:function () {
            $.post(baseUrl+'&action=save',this.edit.pdata,function (d) {
                if(d.flag)
                {
                    layer.closeAll();
                    layer.msg(d.msg);
                    $('#data-list').table();
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        del:function (id,is_superman) {
            if(is_superman == 1){
                layer.msg('超级角色无法删除！');
            }
            layer.msg("确定删除该角色吗？", {
                time: false, //20s后自动关闭
                btn: ['确定', '取消'],
                yes:function () {
                    $.post(baseUrl+'&action=del',{id:id,is_superman:is_superman},function (d) {
                        layer.closeAll();
                        if(d.flag)
                        {
                            layer.msg('删除成功！');
                            $('#data-list').table();
                        }else{
                            layer.msg(d.msg);
                        }
                    },'json')
                }
            });

        }
    };

    app.init();
</script>